<!-- 司机详情 -->
<template>
  <div class="dashboard-container driver-detail">
    <el-card style="margin:20px; height:85vh; position:relative">
      <!-- 标签页 -->
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="基本信息"
          name="first"
        >基本信息</el-tab-pane>
        <el-tab-pane
          label="行驶证信息"
          name="second"
        >行驶证信息</el-tab-pane>
      </el-tabs>
      <!-- 内容渲染 -->
      <!-- 基本信息 -->
      <el-form
        v-if="labelTag === '基本信息'"
        ref="form"
        :inline="true"
        :model="driverDetail"
        class="demo-form-inline"
        :rules="rules"
      >
        <el-form-item
          label="员工编号"
          style="margin-right: 50px;margin-left: 50px;"
          prop="account"
        >
          <input
            v-if="type === 'view'"
            v-model="driverDetail.account"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="driverDetail.account"
            style="width: 200px;"
            disabled=""
          ></el-input>
        </el-form-item>
        <el-form-item
          label="司机姓名"
          style="margin-right: 50px;margin-left: 50px;"
          prop="name"
        >
          <input
            v-if="type === 'view'"
            v-model="driverDetail.name"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="driverDetail.name"
            style="width: 200px;"
            disabled=""
          ></el-input>
        </el-form-item>
        <el-form-item
          label="所属机构"
          style="margin-right: 50px;margin-left: 50px;"
          prop="agency"
        >
          <input
            v-if="type === 'view'"
            v-model="driverDetail.agency"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="driverDetail.agency"
            style="width: 200px;"
            disabled=""
          ></el-input>
        </el-form-item>
        <el-form-item
          label="手机号"
          style="margin-right: 50px;margin-left: 50px;"
          prop="mobile"
        >
          <input
            v-if="type === 'view'"
            v-model="driverDetail.mobile"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="driverDetail.mobile"
            style="width: 200px;"
            disabled=""
          ></el-input>
        </el-form-item>
        <el-form-item
          label="年龄"
          style="margin-right: 50px;margin-left: 50px;"
          prop="age"
        >
          <input
            v-if="type === 'view'"
            v-model="driverDetail.age"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="driverDetail.age"
            style="width: 200px;"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 行驶证信息 -->
      <el-form
        v-if="labelTag === '行驶证信息'"
        ref="form1"
        :inline="true"
        :model="licenseDetail"
        class="demo-form-inline"
        :rules="rules1"
        label-width="100px"
        label-position="right"
      >
        <el-form-item
          label="驾驶证号"
          style="margin-right: 50px;margin-left: 50px;"
          prop="licenseNumber"
        >
          <input
            v-if="type === 'view'"
            v-model="licenseDetail.licenseNumber"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="licenseDetail.licenseNumber"
            placeholder="行驶证号码"
            style="width: 200px;"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="准驾车型"
          style="margin-right: 50px;margin-left: 100px;"
          prop="allowableType"
        >
          <input
            v-if="type === 'view'"
            v-model="licenseDetail.allowableType"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="licenseDetail.allowableType"
            style="width: 200px;"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="初领证日期"
          prop="initialCertificateDate"
          style="margin-left:50px"
        >
          <el-date-picker
            v-model="licenseDetail.initialCertificateDate"
            type="date"
            placeholder="选择日期"
            style="margin-right: 50px;"
            :disabled="type === 'view'"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="有效期限"
          style="margin-right: 50px;margin-left: 50px;position:relative"
          prop="validPeriod"
          width="90"
        >
          <div
            v-if="type === 'edit'"
            class="dw"
          >年</div>
          <input
            v-if="type === 'view'"
            v-model="licenseDetail.validPeriod"
            type="text"
            class="noBorder"
            style="width:200px"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="licenseDetail.validPeriod"
            placeholder="有效期限"
            style="width: 200px;"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="驾龄"
          style="margin-right: 50px;margin-left: 100px;position:relative"
          prop="driverAge"
          width="90"
        >
          <div
            v-if="type === 'edit'"
            class="dw"
          >年</div>
          <input
            v-if="type === 'view'"
            v-model="licenseDetail.driverAge"
            type="text"
            class="noBorder"
            style="width:200px"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="licenseDetail.driverAge"
            placeholder="驾龄"
            style="width: 200px;"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="驾驶证类型"
          style="margin-right: 50px;margin-left: 50px;position:relative"
          prop="licenseType"
        >
          <input
            v-if="type === 'view'"
            v-model="licenseDetail.licenseType"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="licenseDetail.licenseType"
            style="width: 200px;"
            placeholder="驾驶证类型"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="从业资格证"
          style="margin-right: 50px;margin-left: 50px;position:relative"
          prop="qualificationCertificate"
        >
          <input
            v-if="type === 'view'"
            v-model="licenseDetail.qualificationCertificate"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="licenseDetail.qualificationCertificate"
            style="width: 200px;"
            placeholder="从业资格证"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="入场证信息"
          style="margin-right: 50px;margin-left: 100px;position:relative"
          prop="passCertificate"
        >
          <input
            v-if="type === 'view'"
            v-model="licenseDetail.passCertificate"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="licenseDetail.passCertificate"
            style="width: 200px;"
            placeholder="入场证信息"
          ></el-input>
        </el-form-item>
        <br>
        <el-form-item
          label="图片信息"
          style="margin-right: 50px;margin-left: 50px;"
        >
          <div style="display:flex">
            <el-image
              v-for="(item, index) in picture"
              :key="index"
              style="width: 212px; height: 160px; border:1px solid #ccc; margin:0 12px"
              :src="item"
              fit="fit"
            ></el-image>
            <el-upload
              v-if="type === 'edit'"
              action="#"
              list-type="picture-card"
              :http-request="upload"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog
              v-if="type === 'edit'"
              :visible.sync="dialogVisible"
            >
              <img
                width="212px"
                height="160pxs"
                :src="dialogImageUrl"
                alt=""
              >

            </el-dialog>
            <div
              v-if="type === 'edit'"
              class="el-upload__tip"
            >注：图片大小不超过5M；仅能上传 PNG JPEG JPG类型图片；建议上传400*300尺寸的图片；最多上传2张
            </div>
          </div>
        </el-form-item>

      </el-form>
      <!-- 底部按钮 -->
      <div class="btn">
        <el-button
          v-if="type === 'view'"
          type="danger"
          @click="goEdit"
        >编辑</el-button>
        <el-button
          v-if="type === 'edit'"
          @click="handleClose"
        >取消</el-button><el-button
          v-if="type === 'edit'"
          type="danger"
          @click="save"
        >保存</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { driverDetailAPI, updateDriverDetailAPI, getLicenseDetailAPI, updateLicenseDetailAPI } from '@/api/driver.js'
import { uploadImgAPI } from '@/api/upload'
export default {
  data() {
    return {
      labelTag: '基本信息',
      type: 'view',
      driverDetail: {},
      licenseDetail: {},
      rules: {
        account: [
          { required: true, message: '请输入员工编号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入司机姓名', trigger: 'blur' }
        ],
        agency: [
          { required: true, message: '请输入所属机构', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ]
      },
      rules1: {
        licenseNumber: [
          { required: true, message: '请输入驾驶证号', trigger: 'blur' }
        ],
        allowableType: [
          { required: true, message: '请输入准驾车型', trigger: 'blur' }
        ],
        initialCertificateDate: [
          { required: true, message: '请输入初次领证日期', trigger: 'blur' }
        ],
        driverAge: [
          { required: true, message: '请输入驾龄', trigger: 'blur' }
        ],
        licenseType: [
          { required: true, message: '请输入驾驶证类型', trigger: 'blur' }
        ],
        qualificationCertificate: [
          { required: true, message: '请输入从业资格证', trigger: 'blur' }
        ],
        passCertificate: [
          { required: true, message: '请输入入场信息', trigger: 'blur' }
        ],
        validPeriod: [
          { required: true, message: '请输入有效期', trigger: 'blur' }
        ]
      },
      activeName: 'first',
      picture: [],
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  mounted() {
    this.getDriverDetail()
    this.getLicenseDetail()
  },
  methods: {
    // 处理上传
    async upload(e) {
      const data = new FormData()
      if (this.labelTag === '行驶证信息') {
        data.append('file', e.file)
        const res = await uploadImgAPI(data)
        this.picture.push(res.data)
      }
    },
    // 保存编辑
    save() {
      if (this.labelTag === '基本信息') {
        this.$refs.form.validate(async valid => {
          if (valid) {
            this.type = 'view'
            await updateDriverDetailAPI(this.driverDetail)
            this.$message.success('操作成功')
          }
        })
      } else {
        this.$refs.form1.validate(async valid => {
          if (valid) {
            this.type = 'view'
            this.licenseDetail.picture = this.picture.join(',')
            await updateLicenseDetailAPI(this.licenseDetail)
            this.$message.success('操作成功')
          }
        })
      }
    },
    // 取消编辑
    handleClose() {
      this.type = 'view'
      if (this.labelTag === '基本信息') this.$refs.form.resetFields()
      if (this.labelTag === '行驶证信息') this.$refs.form1.resetFields()
      this.getDriverDetail()
      this.getLicenseDetail()
    },
    // 打开编辑
    goEdit() {
      this.type = 'edit'
    },
    // 标签切换
    handleClick(tab) {
      this.labelTag = tab.label
    },
    // 获取司机详情
    async getDriverDetail() {
      const id = this.$route.query.id
      const res = await driverDetailAPI(id)
      res.data.agency = res.data.agency.name
      this.driverDetail = res.data
    },
    // 获取驾驶证详情
    async getLicenseDetail() {
      const res = await getLicenseDetailAPI(this.$route.query.id)
      this.licenseDetail = res.data
      if (this.licenseDetail.picture) this.picture = this.licenseDetail.picture.split(',')
    }
  }
}
</script>
<style lang="scss" scoped>
.el-upload__tip {
  position: absolute;
  bottom: -30px;
  color: #4E5969;
  z-index: 10;
  line-height: 14px;
  width: 800px;
}
.dw {
  position: absolute;
  right: 20px;
  z-index: 10;
}
.btn {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  border-top: 1px solid #ccc;
  padding-top: 20px;
}
::v-deep .el-form-item__label {
  color: #20232A;
  font-weight: 400;
  width: 85px;
  text-align: left;
}
::v-deep .el-tabs__content {
  display: none;
}
::v-deep .el-tabs__active-bar {
  background-color: #E15536;

}
::v-deep .el-tabs__item.is-active {
  font-size: 16px;
  color: #20232A;
  line-height: 24px;
  font-weight: 600;
}

::v-deep .el-tabs__item {
  font-size: 16px;
}

::v-deep .el-tabs__item:hover {
  color: #4E5969;
}
.active {
  color: #ff643d;
}
</style>

<style lang="scss" scoped>
::v-deep .noBorder {
  border: 0;
  outline: 0;
  width: 200px;
  color: #818693;
}
.driver-detail {
  ::v-deep .el-container {
    flex-direction: column;
    margin-left: 0px;

  }

  .in {
    height: calc(100vh - 205px);
  }

  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;

    ::v-deep .el-aside {
      padding-bottom: 14px;
      width: 100% !important;
      display: flex;
      background-color: #ffffff;
      border-bottom: 1px solid #E5E7EC;
      text-align: left;
      font-size: 14px;

      .aside-item {
        cursor: pointer;

        &:first-child {
          margin-right: 53px;
          padding-left: 25px;

        }
      }

      .aside-item.active {
        font-size: 16px;
        font-weight: bold;
        color: #20232A;

        &:after {
          content: '';
          display: block;
          background-color: #E15536;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}
</style>
